<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <script>
        Vue.config.productionTip=true;
        Vue.config.devtools=true;
        Vue.config.silent=true;
    </script>
    <script>
        function setInnerText(e){
            e.innerText="数据变量";//===>"数据变量"
            e.innerText=123;//===>123
            e.innerText=true;//===>true
            e.innerText=[1,2,3,4];//===>1,2,3,4
            e.innerText={
                name:"tom"
            };//===>[object Object]
            e.innerText=null;//===>空字符串
            e.innerText=undefined;//===>undefined
        }
    </script>
    <style>
        .p{
            width:100%;
            height:100px;
            border:1px dashed black;
        }
    </style>
</head>
<body>
    <div>
        <pre>
            vue到底干了什么在插入js数据类型显示页面时？
        </pre>
        <p class="p" onclick="setInnerText(this)"></p>
    </div>
    <div id="app">
        <p>{{msg}}</p>
        <!-- ===>[1,2,3,4] -->
        <p>arr:{{arr}}</p>
        <p>arr[0]:{{arr[0]}}</p>
        <!-- ===>不变 -->
        <p>user:{{user}}</p>
        <p>user.name:{{user.name}}</p>
        <p>user.name:{{user['name']}}</p>
        <p>user.name:{{user["name"]}}</p>
        <p>num:{{num}}</p>
        <p>boolean:{{bool}}</p>
        <!-- ===>空字符串 -->
        <p>null:{{null}}</p>
        <!-- ===>空字符串 -->
        <p>undefined:{{undefined}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"数据变量",
                arr:[1,2,3,4],
                user:{
                    name:"tom",
                    age:23
                },
                num:123,
                bool:true,
                null:null,
                undefined:undefined,
            }
        })
    </script>
</body>
</html>